<template>
  <div class="ratingContent">
      <div class="user-info">
        <span class="time">{{rating.rateTime | time}}</span>
        <img  class="user-avatar" :src="rating.avatar" width="24" height="24"  alt="rating.avatar">
        <span class="user-name">{{rating.username}}</span>
      </div>
      <div class="main-info">
        <span class="icon" :class="classMap[rating.rateType]"></span>
        <span v-show="rating.text" class="text">{{rating.text}}</span>
      </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    props:{
      rating:{
        type: Object
      }
    },
    data(){
      return{
        classMap : [ 'icon-thumb_up', 'icon-thumb_down']
      }
    },
    filters:{
      time(value) {
        let date = new Date(value);
        let str= `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}  ${date.getHours()}:${date.getMinutes()}`
        return str;
      }
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "../../common/mixin";
  .ratingContent{
    padding: 16px 0;
    @include border-1px(rgba(7,17,27,0.1));
    .user-info{
      font-size: 10px;
      line-height: 12px;
      color: rgb(147,153,159);
      .user-avatar{
        float: right;
        border-radius: 50%;
        margin: -5px 0 0 10px;
      }
      .user-name{
        float: right;
      }
    }
    .main-info{
      margin-top: 6px;
      .icon{
        font-size: 12px;
        line-height: 24px;
      }
      .icon-thumb_up{
        color: rgb(0,160,220);
      }
      .icon-thumb_down{
        color: rgb(147, 153, 169);
      }
      .text{
        font-size: 12px;
        line-height: 16px;
        color: rgb(7,17,27);
      }
    }
  }

</style>
